<template>
  <div class="home">
    <p>vuex的数据 : {{ $store.state.home.count }}</p>
    <p>成绩:{{ $store.getters.filter }}</p>
    <input type="button" value="加2" @click="addNum" />
    <input type="button" value="减3" @click="cutNum" />
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  created() {
    //1.获取state里面的数据
    console.log(this.$store);
  },

  methods: {
    addNum() {
      //2.调用store里面mutations里面的方法 : 参数一：方法名  参数二:载荷 实参 官方推荐，尽量不要在组件内调用mutations的方法
      // this.$store.commit("add", { num1: 2, num2: 5 });

      //3.调用actions方法，间接调用mutations的方法
      this.$store.dispatch("addItem", { num1: 2, num2: 5 });
    },
    cutNum() {
      // this.$store.commit("cut", 2);
      this.$store.dispatch("cutItem", 3);
    }
  }
};
</script>
